<template>
  <basic-dialog
    width="700px"
    title="自定义筛选字段"
    :visible="visible"
    :handleClose="handleCloseDialog"
    :handleOpen="handleOpen"
    :handleOk="handleConfirm"
    :loadingBtn="confirmLoading"
  >
    <div v-loading="pageLoading">
      <el-switch
        style="zoom: .8"
        v-for="(item, index) in fieldList"
        :key="index"
        v-model="item.isShow"
        :active-text="item.label"
      />
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import {
  getAllSearchFieldsService,
  updateSearchFieldStatusService
} from '@/api/sourcing/public';

export default {
  components: {
    BasicDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    menuId: {
      type: [String, Number],
    }
  },
  data () {
    return {
      confirmLoading: false,
      pageLoading: false,
      fieldList: []
    }
  },
  methods: {
    // 获取字段数据
    async getFieldsData () {
      const res = await getAllSearchFieldsService(
        { menuId: this.menuId },
        state => { this.pageLoading = state }
      )
      if (res) {
        const { data } = res;
        this.fieldList = data;
      }
    },
    // 更新筛选字段
    async updateSearchFieldStatus () {
      const res = await updateSearchFieldStatusService(
        {
          menuId: this.menuId,
          configList: this.fieldList
        },
        state => { this.confirmLoading = state }
      )
      if (res) {
        this.$message.success('操作成功')
        this.handleCloseDialog()
        this.$emit('submitCallback')
      }
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    handleOpen () {
      this.getFieldsData()
    },
    handleConfirm () {
      this.updateSearchFieldStatus()
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-switch {
  margin-right: 10px;
  height: 30px;
  min-width: 195px
}
</style>
